<template>
  <div class="baseBox">
    <Card>
      <Form v-model:form="form" :formList="formList" layout="inline" @save="search">
        <template #change_type>
          <a-select v-model:value="form.change_type" placeholder="请选择">
            <a-select-option :value="item.id" v-for="(item,index) in changeTypeList" :key="index">{{item.name}}</a-select-option>
          </a-select>
        </template>
      </Form>
    </Card>
    <Table class="mt_20 flex" :width="2300" :dataSource="listenList" :columns="columns">
      <!-- <template #header>
        <div class="d_f w_100b">
          <a-space>
            <a-button type="primary">批量导入 </a-button>
            <a-button type="primary" @click="output">导出 </a-button>
            <a-button type="primary" @click="$download()">模板下载</a-button>
          </a-space>
          <div class="flex" style="display: flex; justify-content: flex-end">
            <a-button type="primary" @click="add">新增 </a-button>
          </div>
        </div>
      </template> -->
      <!-- <template #change_image="{ value }">
        <div class="h_100b w_100b scroll_y" style="max-heght:60px;">
          <a-image
            v-if="value"
            :width="'100%'"
            :height="'100%'"
            :src="value"
            :alt="value"
          />
        </div>
      </template> -->
      <template #change_attr="{ value }">
        {{ value || '-' }}
      </template>
      <template #change_before="{ value }">
        {{ value || '-' }}
      </template>
      <template #change_after="{ value }">
        {{ value || '-' }}
      </template>
      <template #up_time="{ value }">
        {{ value || '-' }}
      </template>
      <template #change_image="{ record }">
        <div class="h_100b w_100b scroll_y" style="max-heght:60px;">
          <div style="text-align: center;" v-if="record.change_image">
            <a-image
              :width="'100%'"
              :height="'100%'"
              :fallback="require('@/assets/null.png')"
              :src="record.change_image"
              :alt="record.change_image"
            />
            <!-- <a :href="record.url" target="_blank">
              <img class="visit-img" src="@/assets/visit.png" />
              <span class="visit-link">访问</span>
            </a> -->
          </div>
          <span v-else>-</span>
        </div>
      </template>
      <template #action>
        <a-space>
          <a-button type="primary">历史查询 </a-button>
          <a-button type="primary">网页信息查看 </a-button>
        </a-space>
      </template>
    </Table>
  </div>
  <!-- 编辑 -->
  <Edit v-model:visible="editVisible" :tempData="selectInfo" @reload="reload" />
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { formList, columns } from "./href";
import Card from "@/components/Card";
import Form from "@/components/Form";
import Table from "@/components/Table";
import { listenApi } from "@/api";

const changeTypeList = [
  {
    id: 1,
    name: '标题变化'
  },
  {
    id: 2,
    name: '关键词变化'
  },
  {
    id: 3,
    name: '描述变化'
  },
  {
    id: 4,
    name: 'SEO 变化'
  },
  {
    id: 5,
    name: '链接跳转变化'
  },
  {
    id: 6,
    name: '百度安全检测'
  }
]
const form = ref({});
const listenList = ref([]);
const selectInfo = ref({});

const editVisible = ref<boolean>(false);

onMounted(() => {
  getData();
});

async function getData(page = 1) {
  const result = await listenApi.page({
    page,
    ...form.value
  });
  // const { data } = result;
  // console.log(result)
  listenList.value = result;
}
function search() {
  getData()
}
function add() {
  selectInfo.value = {};
  editVisible.value = true;
}
function edit(item) {
  selectInfo.value = item;
  editVisible.value = true;
}
function reload() {
  getData();
}
function output() {
  listenApi.output()
}
</script>

<style lang="less" scoped></style>
